<template>
  <div class="edreport">
    <div class="searchtitle">
      <div class="searchitem">
        <div class="item_id">代理商higo号码</div>
        <el-input class="inputline_id" 
        v-model="searchdetail.mallErbanNo"
        prefix-icon="el-icon-search" placeholder="请输入代理商higo号码"></el-input>
      </div>
      <div class="searchitem">
        <div class="item_name">代理商真实姓名</div>
        <el-input class="inputline_name"  
         v-model="searchdetail.mallRealName"
        prefix-icon="el-icon-search" placeholder="请输入代理商真实姓名"></el-input>
      </div>
      <div class="searchitem">
        <div class="item_user">申请订单号</div>
        <el-input class="inputline_user"
          v-model="searchdetail.orderNo"
         prefix-icon="el-icon-search" placeholder="请输入订单号"></el-input>
      </div>
      <div class="searchitem">
        <div class="item_time">时间</div>
        <el-date-picker
            class="inputline_date"
            v-model="searchdetail.datetime"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
        >
          <!--  :picker-options="pickerOptions"-->
        </el-date-picker>
      </div>
       <div class="searchitem">
        <div class="item_user">申请状态</div>
   <el-select v-model="searchdetail.status" placeholder="请选择">
    <el-option
      v-for="item in [{
        label:'已发放',
        value:1
      },
      {
        label:'待发放',
        value:0
      },
      {
        label:'已驳回',
        value:-1
      }
      ]"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>

      </div>
      
     
        <el-button type="primary" @click="goSearch" class="search" icon="el-icon-search"></el-button>
        <el-button type="success" circle @click="reset" class="reset" icon="el-icon-refresh"></el-button>
      
    </div>
    <div class="content">
      <el-button :loading="downloading" @click="exportExcel" type="primary" class="export" size="mini">导出表格</el-button>
            <div class="total" v-if="StaticData">
        <h2>统计值</h2>
      

申请人数： {{StaticData.number}}    发放金币累计：{{StaticData.totalSendCoin}}    待处理转账金额（USD）： {{StaticData.pendingAmountUSD}}   待处理转账金额（HKD）：{{StaticData.pendingAmountHKD}}

实际到账金额（USD）：{{StaticData.actualAmountUSD}}   实际转账金额（HKD）： {{StaticData.actualAmountHKD}}
      </div>
      <el-table
          :data="currentData"
          style="width: 100%;font-size: 13px;margin-top: 15px"
          border
          max-height="375"
          class="requestTabble"
          stripe
          >
          <el-table-column
            align="center"
            prop="createTime"
            label="创建时间"
            width="120">
        </el-table-column>
        <el-table-column
            align="center"
            prop="orderNo"
            label="申请订单号"
            width="120">
        </el-table-column>
        <el-table-column
            align="center"
            prop="userNick"
            label="higo昵称"
            width="120">
        </el-table-column>
        <el-table-column
            align="center"
            prop="erbanNO"
            label="用户higo号"
            width="120">
        </el-table-column>
        <el-table-column
            align="center"
            prop="realName"
            label="用户实名信息"
            width="120">
        </el-table-column>
        <el-table-column
            align="center"
            prop="bankName"
            label="转账银行"
            width="120">
        </el-table-column>
        <el-table-column
            align="center"
            prop="amount"
            label="转账金额"
            width="120">
        </el-table-column>
        <el-table-column
            align="center"
            prop="bankNumber"
            label="转账银行账户"
            width="120">
        </el-table-column>
        <el-table-column
            align="center"
            prop="bankCode"
            label="银行代码"
            width="120">
        </el-table-column>
        <el-table-column
            align="center"
            prop="bankOrderNo"
            label="转账银行订单号"
            width="120">
        </el-table-column>
        <el-table-column
            align="center"
            prop="status"
            label="状态"
            width="120">
        </el-table-column>
        <el-table-column
            align="center"
            prop="arrivalCoin"
            label="发放金币"
            width="120">
        </el-table-column>
        <el-table-column
            align="center"
            prop="arrivalAmount"
            label="实际到账金额"
            width="120">
        </el-table-column>
        <el-table-column
            align="center"
            prop="handleTime"
            label="操作时间"
            width="120">
        </el-table-column>
        <el-table-column
            align="center"
            prop="operator"
            label="操作人"
            width="120">
        </el-table-column>
        <el-table-column
            align="center"
            label="操作"
            width="120"
            fixed="right"
            >
      <template slot-scope="scope">
        <template v-if="scope.row.btnStatus==0">
         <!-- <el-button @click="sendCoins(scope.row.id)" type="text" size="small">发放</el-button> -->
        <el-button @click="showsendCoins(scope.row)" type="text" size="small">发放</el-button>
         <el-button @click="showRefuseCoins(scope.row.id)" type="text" size="small">驳回</el-button>
        </template>
          <template v-else-if="scope.row.btnStatus==1">
            已发放
        </template>
         <template v-else>
            已驳回
        </template>

      </template>
        </el-table-column>
      </el-table>
  
  <el-pagination
  class="foot"
  background
  layout="prev, pager, next"
  :total="itemnum"
  @current-change="handleCurrent"
  :current-page.sync="pageNo"
  > 
</el-pagination>
    </div>

  <el-dialog
  title="发放金币"
  :visible.sync="sendVisible"
  width="30%"
  :before-close="resetSendData"
  >
  <el-form
   label-position="top" 
   label-width="80px" 
   :model="sendData">
  <el-form-item label="实际到账金额">
    <el-input v-model="sendData.amount"></el-input>
  </el-form-item>
  <el-form-item label="转账货币">
     <el-radio v-model="sendData.currency" label="USD">美元</el-radio>
     <el-radio v-model="sendData.currency" label="HKD">港币</el-radio>
  </el-form-item>
  <el-form-item label="发放金币数">
    <el-input v-model="sendData.coin"></el-input>
  </el-form-item>
</el-form>
  <span slot="footer" class="dialog-footer">
    <el-button  @click="resetSendData">取 消</el-button>
    <el-button @click="confirmSendCoin" type="primary">确 定</el-button>
  </span>
</el-dialog>
<el-dialog
  title="驳回申请"
  :visible.sync="refuseVisible"
  width="30%"
  >
  <span>是否确认驳回，驳回后，该金币申请不再处理</span>
  <span slot="footer" class="dialog-footer">
    <el-button @click="refuseVisible = false">取 消</el-button>
    <el-button type="primary" @click="refuseSendCoin">确 定</el-button>
  </span>
</el-dialog>















  </div>
</template>

<script>
import {reportList,agreeCoinRequest,refuseCoinRequest,edagentCoinRecord} from "../Util/request"
import { clctime } from "../Util/tool"
export default {
  data(){
    return{
      searchdetail:{
        mallRealName:"",
        mallErbanNo:"",
        orderNo:"",
        status:null,
        datetime:[],
        startTime:'',
        endTime:''
      },
      tableData: [],
      itemnum:0,
      currentData:[],
      downloading:false,
      pageNo:1,
      StaticData:null,
      pagenum:1,
      sendVisible:false,
      sendData:{
        amount:null,
        currency:null,
        coin:null,
        recordId:null,
      },
      refuseVisible:false
      

    }
  },
  methods:{
    deleteRow(e,n){
      console.log(e,n)
    },
    getReport(e){
       reportList((res)=>{
         res.data.list.forEach(el => {
            
            el.btnStatus=el.status
            switch (el.status) {
              case 1:
                el.status="已发放"
                break;
              case 0:
                el.status='待处理'
                break;
              case -1:
                el.status="已驳回"
                break;
            }
      
         });
          
          this.currentData = res.data.list
          this.itemnum = res.data.total

       },e)
    },
    reset(){
            this.searchdetail={
              mallErbanNo:"",
              mallRealName:"",
              orderNo:"",
              status:null,
              datetime:[],
              starTime:'',
              endtime:''
           }
           this.getReport({})
           this.pageNo=1
    },
    goSearch(){ 
        // console.log(this.searchdetail.datetime[0]);
      if(this.searchdetail.datetime[0]){
        
        this.searchdetail.startTime=clctime(this.searchdetail.datetime[0],true) 
        this.searchdetail.endTime=clctime(this.searchdetail.datetime[1]) 
      }

      let i = {}
      for(let a in this.searchdetail){
        if(a!=="datetime"&&(this.searchdetail[a]||this.searchdetail[a]===0)){
          i[a] = this.searchdetail[a]
        }
      }
     edagentCoinRecord((res)=>{
       this.StaticData=res.data
      },i)
    this.getReport(i)
    this.pageNo=1
    },
    showsendCoins(e){
      this.sendVisible =true
      this.sendData.amount =e.arrivalAmount
      this.sendData.currency= e.arrivalCurrency
       this.sendData.recordId= e.id
    },
    showRefuseCoins(e){
      this.refuseVisible =true
      this.sendData.recordId = e 
    },
    confirmSendCoin(){
     agreeCoinRequest((res)=>{
       if(res.code==200){
        this.$message({
          message: '发放成功',
          type: 'success'
        });
        this.resetSendData()
        this.handleCurrent(this.pagenum)
       }
      },this.sendData)
    },
    resetSendData(){
      this.sendVisible =false
     
      this.sendData={
        amount:null,
        currency:null,
        coin:null, recordId:null,
      }
    },
    refuseSendCoin(){
      refuseCoinRequest((res)=>{
        if(res.code==200){
          this.$message({
            message:"驳回成功",
            type:"success"
          })
           this.refuseVisible=false
           this.handleCurrent(this.pagenum)
        }
      },this.sendData.recordId)
    },
    exportExcel() {
     this.downloading=true
        reportList((res)=>{
        this.tableData =res.data.list
        import('@/Util/Export2Excel.js').then(excel => {
        const tHeader = ['申请订单号','higo昵称','用户higo号','用户实名信息','转账银行','转账金额','转账银行账户','银行代码','转账银行订单号','状态','发放金币','实际到账金额','操作时间','操作人']
        const filterVal = ['orderNo', 'mallErbanNo', 'mallErbanNo', 'mallRealName', 'bankName',"amount",'bankNumber','bankCode','bankOrderNo','status','coin','arrivalAmount','handleTime','operator']
        const list = this.tableData;
        const data =  this.formatJson(filterVal,list)
        excel.export_json_to_excel({
          header: tHeader,
          data,
          filename: "HIGO COINS REQUEST",
          autoWidth: true,
          bookType: "xlsx"
        })
         this.downloading=false
      })
     },{
       rows:this.itemnum
     })




       

    },
    formatJson(filterVal, jsonData) {
        return jsonData.map(v => filterVal.map(j => v[j]))
    },
    handleCurrent(e){
      this.pagenum = e
     if(this.searchdetail.datetime[0]){
        this.searchdetail.startTime=clctime(this.searchdetail.datetime[0]) 
         this.searchdetail.endTime=clctime(this.searchdetail.datetime[1]) 
      }

      let i = {}
      for(let a in this.searchdetail){
        if(a!=="datetime"&&(this.searchdetail[a]||this.searchdetail[a]===0)){
          i[a] = this.searchdetail[a]
        }
      }
      console.log(i);
      this.getReport({
        page:e,
        ...i
      })
    }

  },
  mounted(){
      this.getReport({})
      edagentCoinRecord((res)=>{
       this.StaticData=res.data
      },{})
      
  },
  watch:{
    currentData:{
      handler(n){    
      n.forEach((el)=>{
          el.amount = el.amount + el.currency
          el.arrivalAmount =el.arrivalAmount +el.arrivalCurrency
      })
      }
    },
  }
}
</script>

<style lang="less"  scoped>
.edreport{
  width:100%;
  height:100%;
  .searchtitle{
    position: relative;
    // margin: 15px auto 0;
    width: 100%;
    height: 100px;
    background-color: #fff;
    border-radius: 5px;

    .searchitem{
      position: absolute;
      //display: flex;
      width: 260px;
      height: 40px;
      line-height:40px ;
      font-size: 13px;
      //background-color: red;
      /deep/.el-input__inner{
       height: 25px;
       width: 130px;
      }
      .item_id{
        display: inline-block;
        width: 125px;
      }
      .item_name{
        display: inline-block;
      }
      .item_user{
        display: inline-block;
      }
      .item_time{
        display: inline-block;
      }
      .inputline_id{
        display:inline-block;
        width:125px;
        height: 100%;
        padding: 0;

      }
      .inputline_name{
        display:inline-block;
        width:140px;
        height: 100%;
      }
      .inputline_user{
        display:inline-block;
        width:140px;
        height: 100%;

      }
      .inputline_date{
        //display:inline-block;
        width: 280px;
        height:25px;
        /deep/.el-icon-date{
          line-height: 18px;
        }

        /deep/.el-range-input{
          font-size: 12px;
          line-height: 25px;
        }
        .el-date-editor .el-range__icon{
          line-height: 25px;
        }
       /deep/ .el-range-separator{
          line-height: 25px;
        }

      }

    }
            .search{
          position: absolute;
          top: 45px;
          left: 350px;
          width: 100px;
        }
        .reset{
          position: absolute;
          top: 45px;
          left: 500px;
          
        }
  }
  

  .searchitem:nth-child(2){
    top: 0;
    left:500px;
    
    //background-color: red;
  }
  .searchitem:nth-child(3){
    top: 0;
    left: 280px;
    width: 215px;
    //background-color: blue;
  }
  .searchitem:nth-child(4){
      top: 44px;
    left: 0;
    width: 315px;
    //background-color: red;
  }
    .searchitem:nth-child(5){
      top: 0;
    left: 750px; 
    //background-color: red;
  }

  .content{
    width: 100%;
    height: 800px;
    margin-top: 25px;
    //background-color: red;
    position: relative;
    .export{
      position: absolute;
      top: -5px;
      right: 8px;
      // width: 80px;
      // height: 50px;
    }
    .total{
      font-weight: bold;
      margin-top: 15px;
      h2{
        display: inline-block;
        margin-bottom: 15px;
      }
      font-size: 14px;
    }
    // /deep/  .el-table__body-wrapper{
    //   z-index: 100;
    // }
      /deep/  .el-table__body-wrapper::-webkit-scrollbar{
      height: 10px;
     
      }
        /deep/.el-table__body-wrapper::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
      border-radius   : 10px;
      background-color: skyblue;
      background-image: -webkit-linear-gradient(
      45deg,
      rgba(255, 255, 255, 0.2) 25%,
      transparent 25%,
      transparent 50%,
      rgba(255, 255, 255, 0.2) 50%,
      rgba(255, 255, 255, 0.2) 75%,
      transparent 75%,
      transparent
      );
        }
       /deep/.el-table__body-wrapper::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
        box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
        background   : #ededed;
        // border: 0;
       }
  }
}

</style>